import React, { PureComponent } from 'react'
import { Routes, Route, Link, NavLink, Navigate } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import NotFount from './components/NotFount'
import HomeBanner from './components/HomeBanner'
import HomeContent from './components/HomeContent'
import Category from './components/Category'
import Detail from './components/detail'
import User from './components/User'
import withRouter from './hoc/withRouter'
import { useRoutes } from 'react-router-dom'

export class App extends PureComponent {
  navUser(path){
    const { router } = this.props
    // router.Navigate(path)
    router.navigate(path + '?name=coder&id=1')
    console.log(router)
  }
  render() {
    return (
      <div>
        <div className='header'>
          <Link to="/home">home</Link>
          <Link to="/about">about</Link>
          <button onClick={() => this.navUser('/user')}>User</button>
          <NavLink></NavLink>
        </div>
        <hr />
        <div className='content'>
          <Routes>
            <Route path='/' element={<Navigate to="/home"/>}></Route>
            <Route path='/home' element={<Home />}>
              <Route path='/home/banner' element={<HomeBanner />}></Route>
              <Route path='/home/content' element={<HomeContent />}></Route>
              <Route path='/home/category' element={<Category />} />
              <Route path='/home/detail/:id' element={<Detail></Detail>}></Route>
            </Route>
            <Route path='/about' element={<About />} />
            <Route path='/user' element={<User />} />
            <Route path='*' element={<NotFount></NotFount>}></Route>
          </Routes>
        </div>
        <hr />

        <div className='footer'>
          <span>我是底部</span>
        </div>
      </div>
    )
  }
}

export default withRouter(App)